<!-- <div class="container">
</div>
<script>
    var div = document.createElement('div');
    div.id = 'mydiv';
    div.className = 'box';
    div.innerHTML = 'hehe';
    var container = document.querySelector('.container');
    container.appendChild(div);
</script> -->

<!-- <div class="container">
    <div>11</div>
    <div>22</div>
    <div>33</div>
    <div>44</div>
</div>
<script>
    var newDiv = document.createElement('div');
    newDiv.innerHTML = '我是新的节点';
    var container = document.querySelector('.container');
    console.log(container.children);
    container.insertBefore(newDiv, container.children[0]);
    console.log(newDiv);
</script> -->

<!-- <div class="container">
    <div>11</div>
    <div>22</div>
    <div>33</div>
    <div>44</div>
</div>
<script>
    var newDiv = document.createElement('div');
    newDiv.innerHTML = '我是新的节点';
    var container = document.querySelector('.container');
    console.log(container.children);
    // 此处的 children 里有 4 个元素
    container.insertBefore(newDiv, container.children[0]);
    // 此处的 children 里有 5 个元素(上面新插了一个), 0 号元素是 新节点, 
    // 1 号元素是 11, 2号节点是 22, 所以是插入到 22 之前. 
    container.insertBefore(newDiv, container.children[2]);
</script> -->

<!-- <div class="container">
    <div>11</div>
    <div>22</div>
    <div>33</div>
    <div>44</div>
</div>
<script>
    var newDiv = document.createElement('div');
    newDiv.innerHTML = '我是新的节点';
    var container = document.querySelector('.container');
    console.log(container.children);
    container.insertBefore(newDiv, container.children[0]);
	// 插入完毕后再次修改 newDiv 的内容
    newDiv.innerHTML = '我是新节点2';
</script> -->


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- <div>
        <input type="button" value="重新开始一局游戏">
    </div>
    <div>
        请输入要猜的数字： <input type="text"> <input type="button" value="猜">
    </div>
    <div id="count">已经猜的次数：</div>
    <div>
        结果：
    </div>
    <script>
        let count =0;
    </script> -->

    <input type="button" value="重新开始一局游戏" id="reset"><br>
    请输入要猜的数字： <input type="text" id = "number">
    <input type="button" value="猜" id="guess"><br>
    已经猜的次数：<span id="count">0</span><br>
    结果：<span id="result"></span><br>
    <script>
        let inputE = document.querySelector("#number");
        let reset = document.querySelector("#reset");
        let countE = document.querySelector("#count");
        let resultE = document.querySelector("#result");
        let guess = document.querySelector("#guess");

        // 生成随机数
        let guessNumber = Math.floor(Math.random() * 100) + 1; // 1~100之间的数
        let count = 0;
        guess.onclick = function () {
            count++;
            countE.innerHTML=count;
            let userGuess = parseInt(inputE.value);
            if(userGuess == guessNumber){
                resultE.innerHTML = "猜对啦！！！";
                resultE.style = "color:gray;";
            } else if(userGuess< guessNumber){
                resultE.innerHTML="猜小了";
                resultE.style = "color:blue;";
            } else{
                resultE.innerHTML="猜大了";
                resultE.style="color:red;";
            }
        };
        reset.onclick = function(){
            guessNumber = Math.floor(Math.random() * 100) + 1;
            count = 0;
            countE.innerHTML = count;
            resultE.innerHTML = "";
            inputE.value ="";
        }
    </script>
</body>

</html>